<template>
  <div class="login">
    <header class="form-header">
      <h2 class="form-title">Sign in</h2>
      <span class="pull-right">
        new?
        <a>Create an account</a>
      </span>
    </header>
    <el-form ref="form" :model="form">
      <el-form-item class="id" id="id">
        <el-input v-model="form.id" v-bind:placeholder="idlabel"></el-input>
      </el-form-item>
      <el-form-item class="password" id="password">
        <el-input
          v-model="form.password"
          type="password"
          v-bind:placeholder="pdlabel"
        ></el-input>
      </el-form-item>
      <el-alert
        id="login_alert"
        title="Invalid username or password"
        type="error"
        :style="login_alert_display"
        center
        :closable="false"
        show-icon
      >
      </el-alert>
      <div>
        <span class="pull-right">
          <a>Login via SMS</a>
        </span>
        <el-form-item>
          <el-checkbox-group v-model="form.type">
            <el-checkbox label="rm">Remember Me</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </div>
      <el-form-item>
        <el-button type="primary" class="loginbutton" @click="onSubmit()"
          >Login</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        type: [],
      },
      idlabel: "Phone, email or username",
      pdlabel: "password",
      login_alert_display: "display:none",
    };
  },

  methods: {
    onSubmit: function () {
      //const login_alert = document.getElementById("login_alert");
      //login_alert.style.display = "none";

      this.axios({
        method: "post",
        url: "http://10.76.180.223:3000/post",
        data: this.form,
      })
        .then((response) => {
          if (response.data == "pass") {
            //login_alert.style.display = "none";
            this.login_alert_display = "display:none";
            this.$router.push({
              name: "mainview",
              path: "/main",
            });
          } else if (response.data == "forbidden") {
            this.login_alert_display = "display:flex";
            console.log(response);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.login {
  text-align: center;
  height: max-content;
  width: max-content;
  padding: 20px;
  font-weight: bolder;
}
.form-title {
  display: inline-block;
  text-align: left;
}
.loginbutton {
  width: 100%;
}
.loginform {
  display: inline-block;
  width: max-content;
}
</style>
